<div>
    <helloworld></helloworld>
    <router-link tag="el-button" type="primary" :to="$vFN.Tools.toUrl({path:'./list'})">跳转</router-link>
    <div class="ul">


        <div class="li">
            <div class="hh">适用日期选择</div>
            <div class="mm">
                {{dateCycleApplication}}
                <SelectDateCycleApplication v-model="dateCycleApplication"></SelectDateCycleApplication>
            </div>
        </div>
        <div class="li">
            <div class="hh">地图选位置1</div>
            {{SelectAddressMapValue}}
            <div class="mm">
                <SelectAddressMap :appWindow="appWindow" v-model="SelectAddressMapValue"></SelectAddressMap>
            </div>
        </div>


        <div class="li">
            <div class="hh">拖拽排序</div>
            代码来源自 https://sortablejs.github.io/Vue.Draggable
            <div class="mm">
                <div class="DraggableWrap">
                    <div class="l">
                        <Draggable class="list-group" tag="ul" v-model="list" ghostClass= "ghost" :animation="200"  :sort="false" :group="{ name: 'people', pull: 'clone', put: false }" >
                            <transition-group type="transition" :name="!drag ? 'flip-list' : null" >
                                <li class="list-group-item" v-for="element in myDraggableArray" :key="element.order">
                                    <i :class="
                                element.fixed ? 'fa fa-anchor' : 'glyphicon glyphicon-pushpin'
                              " @click="element.fixed = !element.fixed" aria-hidden="true"></i>
                                    {{ element.name }}
                                </li>
                            </transition-group>
                        </Draggable>
                    </div>
                    <div class="l">
                        <Draggable class="list-group" tag="ul" v-model="list" ghostClass= "ghost" :animation="200" group="people">
                            <transition-group type="transition" :name="!drag ? 'flip-list' : null">
                                <li class="list-group-item" v-for="element in myDraggableArray" :key="element.order">
                                    <i :class="
                                element.fixed ? 'fa fa-anchor' : 'glyphicon glyphicon-pushpin'
                              " @click="element.fixed = !element.fixed" aria-hidden="true"></i>
                                    {{ element.name }}
                                </li>
                            </transition-group>
                        </Draggable>
                    </div>
                </div>
            </div>
        </div>


        <div class="li">
            <div class="hh">选择商品组件与回显</div>
            <div class="tip">

            </div>
            <div class="pre">
                <p class="tt">引入方式</p>
                <pre>GoodsList: async () => Vue.extend(await Vue.prototype.$vFN.Components.Base.GoodsList())</pre>
            </div>
            <div class="pre">
                <div class="ll">参数说明</div>


                <pre>选择类型 type "goods"指定商品, "classify"指定类目,"group"指定分组,"all"全部商品</pre>
                <pre>类型数据 data </pre>
                <pre>可选项 options ["goods","classify","group","all"]</pre>
            </div>
            <div class="mm">
                <!-- <el-button tag="el-button" type="primary" @click="SelectGoods()">选择商品</el-button> -->
                <!-- <GoodsListInfo :goodsIds="goodsList"></GoodsListInfo> -->
                {{selectGoodsValue}}
                <SelectGoods :appWindow="appWindow" :data.sync="selectGoodsValue.data" :type.sync="selectGoodsValue.type"
                    :options="selectGoodsValue.options" @change="selectGoodsChange"></SelectGoods>
            </div>
        </div>
        <div class="li">
            <div class="hh">选择地址</div>
            <div class="mm">
                {{addressData}}
                <el-button tag="el-button" type="primary" @click="SelectAddress()">（四级）选择省市区县街道地址</el-button>
                <el-button tag="el-button" type="primary" @click="SelectAddress2('city')">（两级）选择省市地址</el-button>
                <el-button tag="el-button" type="primary" @click="SelectAddress2('region')">（三级）选择省市地址</el-button>
                <SelectAddress :appWindow="appWindow" v-model="addressData"></SelectAddress>
            </div>
        </div>
        <div class="li">
            <div class="hh">选择图片</div>
            <div class="tip">
            </div>
            <div class="mm">
                {{imageList}}
                <el-button tag="el-button" type="primary" @click="SelectImage()">选择图片</el-button>
                {{selectImageWxValue}}
                <el-button tag="el-button" type="primary" @click="SelectResourcesWxImage()">选择微信图片</el-button>

                <SelectImageCheckbox :appWindow="appWindow" v-model="imageList" :count="2" @change="setImageValue" mode="wx"></SelectImageCheckbox>
                <SelectImageRadio :appWindow="appWindow" v-model="imageString" @change="setImageValue" mode="wx"></SelectImageRadio>
            </div>
        </div>
        <div class="li">
            <div class="hh">选择视频</div>

            <div class="mm">
                <div>
                    {{videoList}}
                </div>
                <el-button tag="el-button" type="primary" @click="SelectVideo()">选择视频</el-button>
                <SelectVideo :appWindow="appWindow" v-model="videoList" :count="2" @change="setVideoValue"></SelectVideo>
                <!-- <el-button tag="el-button" type="primary" @click="SelectResourcesWxImage()">选择微信图片</el-button> -->
            </div>
        </div>
        <div class="li">
            <div class="hh">选择音频</div>

            <div class="mm">
                <div>
                    {{audioList}}
                </div>
                <el-button tag="el-button" type="primary" @click="SelectAudio()">选择音频</el-button>
                <SelectAudio :appWindow="appWindow" v-model="audioList" :count="2" @change="setAudioValue"></SelectAudio>
                <!-- <el-button tag="el-button" type="primary" @click="SelectResourcesWxImage()">选择微信图片</el-button> -->
            </div>
        </div>
        <div class="li">
            <div class="hh">拖拽缩放</div>
            代码来源自 https://github.com/kirillmurashov/vue-drag-resize
            <div class="mm">
                <div class="dragResizeWrap">
                    <DragResize :isActive="true" :parentLimitation="true" :w="200" :h="200" @resizing="resize"
                        @dragging="resize">
                        <h3>Hello World!</h3>
                        <p>{{ top }} х {{ left }} </p>
                        <p>{{ width }} х {{ height }}</p>
                    </DragResize>
                </div>
            </div>
        </div>




        <div class="li">
            <div class="hh">选择链接</div>

            <div class="mm">
                <el-button tag="el-button" type="primary" @click="SelectLink()">选择连接</el-button>
            </div>
        </div>

        <div class="li">
            <div class="hh">重写样式 单选框 class="radioStyleGhost s1...s10" sN代表列数，最大支持s10</div>

            <div class="mm">
                <div style="width:500px;">
                    <el-radio-group size="mini" class="radioStyleGhost s2" v-model="radioValue">
                        <el-radio-button :label="1">单选1</el-radio-button>
                        <el-radio-button :label="2">单选2</el-radio-button>
                    </el-radio-group>
                </div>
                <div style="width:500px;margin-top:20px;">
                    <el-radio-group size="mini" class="radioStyleGhost s3" v-model="radioValue">
                        <el-radio-button :label="1">单选1</el-radio-button>
                        <el-radio-button :label="2">单选2</el-radio-button>
                        <el-radio-button :label="3">单选3</el-radio-button>
                    </el-radio-group>
                </div>

                <div style="width:500px;margin-top:20px;">
                    <el-radio-group size="mini" class="radioStyleGhost s10" v-model="radioValue">
                        <el-radio-button :label="1">单选1</el-radio-button>
                        <el-radio-button :label="2">单选2</el-radio-button>
                        <el-radio-button :label="3">单选3</el-radio-button>
                        <el-radio-button :label="4">单选4</el-radio-button>
                        <el-radio-button :label="5">单选5</el-radio-button>
                        <el-radio-button :label="6">单选6</el-radio-button>
                        <el-radio-button :label="7">单选7</el-radio-button>
                        <el-radio-button :label="8">单选8</el-radio-button>
                        <el-radio-button :label="9">单选9</el-radio-button>
                        <el-radio-button :label="10">单选10</el-radio-button>
                    </el-radio-group>
                </div>
            </div>
        </div>


    </div>
</div>